<template>
  <div id="app">
    <div>
      <el-container>
        <el-header>Header</el-header>
      </el-container>
    </div>
    <div>
      <el-container>
        <el-main>Main</el-main>
      </el-container>
    </div>
    <div>
      <el-container>
        <el-footer>footer</el-footer>
      </el-container>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {}
    },
    methods: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-header.el-main, .el-footer {
    display: flex;
  }

  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    flex: 0 0 500px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    flex: 1;
  }

  body > .el-container {
    flex: auto;
    margin-bottom: 40px;
  }</style>
